<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar title="交易结果"/>
		<uni-card :title="resInfo.account_name || ''" :sub-title="resInfo.account_no || ''" :extra="type == 'deposit' ? '充值' : '提现'">
			<view class="card-body">
				<view> 交易流水：<text style="font-size:22rpx">{{resInfo.original_serialno || ''}}</text> </view>
				<view> {{type == 'deposit' ? '充值' : '提现'}}金额：<text style="color:red">￥ {{resInfo.trans_amount || 0}}</text> </view>
			</view>
			<view class="result-box">
				<template v-if="resInfo.status == '1'">
					<view class="icon">
						<uni-icons type="checkbox" size="40" color="#1aad19"></uni-icons>
					</view>
					<view class="text">
						交易成功
					</view>
				</template>
				<template v-else-if="resInfo.status == '2'">
					<view class="icon">
						<uni-icons type="close" size="40" color="#ff5500"></uni-icons>
					</view>
					<view class="text">
						交易失败，{{ resInfo.info }}
					</view>
				</template>
				<template v-else>
					<view class="icon">
						<uni-icons type="spinner-cycle" size="40" color="#00aaff"></uni-icons>
					</view>
					<view class="text">
						提交成功，正在查询支付结果...
					</view>
				</template>
			</view>
		</uni-card>
		<view class="btn-box">
			<button type="primary" :data-url="type == 'deposit' ? '/pages/deposit/index' : '/pages/withdraw/index'"  @click="drapTo">继续{{type == 'deposit' ? '充值' : '提现'}}</button>
			<button type="primary" plain data-url="/pages/trade/index" @click="drapTo">交易流水</button>
			<button type="warn" plain data-url="/pages/index/index" @click="drapTo">返回主页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serial_no: "",
				type: "deposit",
				timer: "",
				resInfo: {}
			}
		},
		
		onLoad( options ) {
			let { serial_no, type } = options
			
			if(serial_no) {
				
				this.serial_no = serial_no
				
				this.type = type
				
				this.openInterval()
			}
			
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		},
		
		methods: {
			openInterval() {
				this.timer = setInterval( () => this.getTradeInfo(), 3000)
				this.getTradeInfo()
			},
			
			getTradeInfo() {
				uni.request({
					url: "/trade/getTradeInfo",
					data: {
						serial_no: this.serial_no,
						type: this.type
					},
					success: (res) => {
						if(res.data.success) {
							if(res.data.data.status != "0") {
								clearInterval(this.timer)
							}
							this.resInfo = res.data.data
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
							
							clearInterval(this.timer)
						}
					}
				})
			},
			
			drapTo(e) {
				let url = e.currentTarget.dataset.url
				
				uni.redirectTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-body {
		font-size: 26rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.result-box {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	
	.btn-box {
		padding: 0 40rpx;
		button {
			margin-top: 40rpx;
		}
	}
</style>